<!Doctype html>

<head>
    <title>后台</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, user-scalable=no" />
    <style>
        .h {
            display: none;
        }

        .nav {
            position: relative;
            width: 20%;
            float: left;
            height: 100%;
        }
        .nav>ul {
            list-style : none;
            padding : 0;
            margin: 0;
        }

        .nav-item {
            cursor: pointer;
            padding: 10px 20px;
        }
        .nav-item:hover {
            background: rgb(54, 107, 255);
            color: #eee;
        }

        .content {
            position: relative;
            width: 80%;
            float: left;
        }

        .subpage {
            padding: 20px;
        }

        table {
            text-align: center;
            width: 100%;
            border: none;
        }

        tr {
            border: 0;
        }

        th {
            background: rgb(54, 107, 255);
            color: #eee;
            padding: 5px 10px;
        }

        td {
            background: #eee;
            padding: 5px 10px;
        }

        .btn-wrapper {
            text-align: center;
        }

        .btn {
            padding: 10px;
        }

        .form-input {
            width: 100%;
            padding: 10px;
        }
        .form-input>label{
            min-width: 10%;
            display: inline-block;
            position:relative;
            vertical-align: top;
            text-align: right;
            padding-right: 10px;
        }
        .form-input>input{
            width: 70%;
            position:relative;
            padding: 4px;
        }
        .form-input>textarea{
            width: 70%;
            position:relative;
        }
        .form-input>select{
            height: 24px;
            width: 70%;
            position:relative;
        }
    </style>
</head>

<body>
    <div class="page h" id="page-loading">loading</div>
    <div class="page h" id="page-login">
        <h4>请登录</h4>
        <form>
            <div>
                <label>用户名</label>
                <input type="text">
            </div>
            <div>
                <label>密码</label>
                <input type="password">
            </div>
            <div>
                <button>提交</button>
            </div>
        </form>
    </div>
    <div class="page h" id="page-admin">
        <div>
            <div class="nav">
                <ul>
                    <li class="nav-item" data-page="subpage-index">首页</li>
                    <li class="nav-item" data-page="subpage-addNews">新增新闻</li>
                    <li class="nav-item" data-page="subpage-newsManage">新闻管理</li>
                    <li class="nav-item" data-page="subpage-modManage">模块管理</li>
                    <li class="nav-item" data-page="subpage-logout">退出</li>
                </ul>
            </div>
            <div class="content">
                <div class="subpage h" id="subpage-index">
                    后台首页
                </div>
                <div class="subpage h" id="subpage-addNews">
                    <div>
                        <div class="form-input">
                            <label>模块</label>
                            <select id="news-add-modid" type="number" value="1" required>
                            </select>
                        </div>
                        <div class="form-input">
                            <label>标题</label>
                            <input id="news-add-title" type="text" required>
                        </div>
                        <div class="form-input h">
                            <label>编辑ID</label>
                            <input id="news-edit-id" type="text" disabled required>
                        </div>
                        <div class="form-input">
                            <label>内容</label>
                            <textarea  id="news-add-content" name="" id="" cols="30" rows="10" required></textarea>
                        </div>
                        <div class="btn-wrapper">
                            <button class="btn" id="news-add-submit">提交</button>
                        </div>
                    </div>
                </div>
                <div class="subpage h" id="subpage-newsManage">
                </div>
                <div class="subpage h" id="subpage-modManage">
                </div>
                <div class="subpage h" id="subpage-logout">
                    你确定要退出吗？
                    <button onclick="admin.logout()">Yes</button>
                </div>
            </div>
        </div>
    </div>
    <script>
        var admin = {};
        admin.isLogin = true;
        admin.init = function () {
            if (!admin.isLogin) {
                admin.switch("page", 'page-login');
            } else {
                admin.switch("page", 'page-admin');
                admin.switch("subpage", 'subpage-index'); // 默认打开首页
            }
        }
        admin.switch = function (className, idName) {
            var subs = document.getElementsByClassName(className);
            for (var j in subs) {
                subs[j].className = className + " h";
            }
            document.getElementById(idName).className = className;
        }
        admin.event = function () {
            // 导航切换
            var navs = document.getElementsByClassName("nav-item");
            for (var i in navs) {
                var val = navs[i];
                val.onclick = function () {
                    var pageName = this.getAttribute("data-page");
                    admin.switch("subpage", pageName);
                    if (pageName === 'subpage-modManage') {
                        admin.loadData("/admin-mods", function (data) {
                            var html = "<table>";
                            html += "<tr><th width='15%'>编号</th><th width='70%'>名称</th><th width='15%'>显示</th></tr>";
                            html += data.map(function(item) {
                                return "<tr><td>"+item.id+"</td><td contenteditable>"+item.name+"</td><td><input id='mods-chk-"+item.id+"' type='checkbox'" + (item.visible == "1" ? " checked" : "") + "></td></tr>"
                            }).join("\n");
                            html += "</table>";
                            html += "<p>&nbsp;</p>";
                            html += "<div class='btn-wrapper'><button class='btn' id='btn-mods-save'>提交</button></div>";
                            document.getElementById(pageName).innerHTML = html;
                            admin.needBindEvent();
                        });
                    } else if (pageName === 'subpage-newsManage') {
                        admin.loadData("/admin-news", function (data) {
                            var html = "<table>";
                            html += "<tr><th width='15%'>编号</th><th width='60%'>标题</th><th width='25%'>操作</th></tr>";
                            html += data.map(function(item) {
                                return "<tr><td>"+item.id+"</td><td>"+item.title+"</td><td><button data-id='"+item.id+"' class='news-edit-btn'>改</button><button data-id='"+item.id+"' class='news-del-btn'>删</button></td></tr>"
                            }).join("\n");
                            html += "</table>";
                            document.getElementById(pageName).innerHTML = html;
                            admin.needBindEvent();
                        });
                    } else if (pageName === 'subpage-addNews') {
                        document.getElementById("news-edit-id").value = "";
                        document.getElementById("news-add-title").value = "";
                        document.getElementById("news-add-content").value = "";
                        admin.loadData("/admin-mods", function (data) {
                            var html = "";
                            html += data.map(function(item) {
                                return "<option value='"+item.id+"'>"+item.name+"</option>";
                            }).join("\n");
                            document.getElementById("news-add-modid").innerHTML = html;
                        });
                    }
                }
            }
            // 新增新闻事件
            document.getElementById("news-add-submit").onclick = function () {
                var data = {
                    "mod_id": document.getElementById("news-add-modid").value,
                    "title": document.getElementById("news-add-title").value,
                    "content": document.getElementById("news-add-content").value
                };
                if (document.getElementById("news-edit-id").value) {
                    var url = "/admin-edit-news";
                    data["edit_id"] = document.getElementById("news-edit-id").value
                } else {
                    var url = "/admin-add-news";
                }
                
                admin.saveData(url, data);
            }

        }
        // 需要重新监听的事件
        admin.needBindEvent = function () {
            // 编辑
            var btns = document.getElementsByClassName("news-edit-btn");
            for (var i in btns) {
                var val = btns[i];
                val.onclick = function () {
                    var id = this.getAttribute("data-id");
                    admin.switch("subpage", "subpage-addNews");
                    admin.loadData("/admin-mods", function (data) {
                        var html = "";
                        html += data.map(function(item) {
                            return "<option value='"+item.id+"'>"+item.name+"</option>";
                        }).join("\n");
                        document.getElementById("news-add-modid").innerHTML = html;
                    });
                    admin.loadData("/admin-get-news/" + id, function (data) {
                        // 设置编辑id
                        document.getElementById("news-edit-id").value = data.id;
                        document.getElementById("news-add-modid").value = data.mod_id
                        document.getElementById("news-add-title").value = data.title
                        document.getElementById("news-add-content").value = data.content
                    });

                }
            }

            // 删
            var btns = document.getElementsByClassName("news-del-btn");
            for (var i in btns) {
                var val = btns[i];
                val.onclick = function () {
                    var id = this.getAttribute("data-id");
                    var r = confirm("真的要删了吗？");
                    if (r) {
                        admin.loadData("/admin-del-news/" + id, function (data) {
                            document.getElementsByClassName("nav-item")[2].click();
                        });
                    }
                }
            }

            // 修改模块事件
            if (document.getElementById("btn-mods-save")) {
                document.getElementById("btn-mods-save").onclick = function () {
                    var trs = document.getElementById("subpage-modManage").firstChild.firstChild.children;
                    var data = [];
                    for (var i in trs) {
                        if (i == 0) {
                            continue;
                        }
                        if (trs[i] instanceof HTMLTableRowElement) {
                            data.push({
                                "id": trs[i].children[0].innerHTML,
                                "name": trs[i].children[1].innerHTML,
                                "visible": trs[i].children[2].firstChild.checked == false ? 0 : 1
                            });
                        }
                    }
                    var url = "/admin-mods-save";
                    
                    admin.saveData(url, data);
                }
            }

        }
        admin.logout = function () {
            admin.isLogin = false;
            admin.init();
        }
        admin.loadData = function (url, fn) {
            var xhr = new XMLHttpRequest();
            xhr.open('GET', url);
            xhr.send();
            xhr.onload = function () {
                if (this.status == 200) {
                    data = JSON.parse(this.responseText);
                    data = data.data;
                    fn(data);
                } else {
                    alert('网络错误');
                }
            }
        }
        admin.saveData = function (url, data) {
            var xhr = new XMLHttpRequest();
            xhr.open("POST", url, true); 
            xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 
            xhr.send(JSON.stringify(data));
            xhr.onload = function () {
                if (this.status == 200) {
                    alert(this.responseText);
                } else {
                    alert('网络错误');
                }
            }
        }

        admin.init();
        admin.event();
    </script>
</body>

</html>